<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../vue.js"></script>
		<!-- https://cn.vuejs.org/v2/guide/conditional.html -->
		<title>条件渲染</title>
		
	</head>
	<body>
		<div id="vm1">
			
			<p>{{message}}</p>
			
			<div v-if="type === 'A'">
			  A
			</div>
			<div v-else-if="type === 'B'">
			  B
			</div>
			<div v-else-if="type === 'C'">
			  C
			</div>
			<div v-else>
			  Not A/B/C
			</div>
			
			<!-- 
			 v-show
			 另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
			 
			 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
			 
			 注意，v-show 不支持 <template> 元素，也不支持 v-else。
			 
			 -->
			 <h1 v-show="isShow">v-show</h1>
		</div>
		
		
		
		<script>
			var data = {
				message: '条件渲染',
				seen: true, // false
				url: 'https://cn.vuejs.org/v2/guide/class-and-style.html',
				isActive:true,
				isGreen:true,
				color:'#FF0000',
				size:'50px',
				type:'C',
				isShow:true,
			
			}
			
			var vm1 = new Vue({
				el: '#vm1',
				data: data,
				methods: {
					click1: function(){
						console.log('click 1 事件')
					},
					click2:function(){
						console.log('click 2 事件')
					},
				}
			})
		</script>
	</body>
</html>
